<template>
  <div class="author-rank-side">
    <header>
      <svg t="1635757569632" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="4743" width="20" height="20">
        <path
            d="M321.584 278.64L208.696 66.648H20.432l182.008 329.872zM677.368 327.552l140.808-260.904h188.28l-203.648 366.272z"
            fill="#0092D2" p-id="4744"></path>
        <path
            d="M878.856 577.768c0 201.792-163.568 365.424-365.48 365.424-201.792 0-365.36-163.632-365.36-365.424 0-201.848 163.576-365.456 365.36-365.456 201.912 0 365.48 163.6 365.48 365.456z"
            fill="#F5B146" p-id="4745"></path>
        <path
            d="M513.384 212.312c-201.792 0-365.36 163.6-365.36 365.456 0 107.36 46.568 203.576 120.272 270.464l515.616-515.616c-66.856-73.704-163.136-120.304-270.528-120.304z"
            fill="#EF962F" p-id="4746"></path>
        <path
            d="M513.44 393l60.032 121.616 134.264 19.528-97.168 94.688 22.936 133.672-120.064-63.12-120.064 63.12 22.936-133.672-97.16-94.688 134.256-19.528z"
            fill="#E5226B" p-id="4747"></path>
        <path d="M598.28 518.232l-24.808-3.616-60.032-121.616-60.032 121.616-134.256 19.528 97.16 94.688-14.792 86.16z"
              fill="#CB1B5B" p-id="4748"></path>
      </svg>
      <!--    <svg t="1635759351136" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7450" width="20" height="20"><path d="M663.25 738.78c-22.84-64.43-84.41-110.72-156.58-110.72-72.17 0-133.74 46.29-156.58 110.72h-9.5v55.36c0 91.58 74.5 166.08 166.08 166.08 91.58 0 166.08-74.5 166.08-166.08v-55.36h-9.5zM506.67 609.61c-10.19 0-18.45-8.26-18.45-18.45v-36.91c0-10.19 8.26-18.45 18.45-18.45s18.45 8.26 18.45 18.45v36.91c0 10.19-8.26 18.45-18.45 18.45z" fill="#F6BB42" p-id="7451"></path><path d="M743.57 401.53L653.58 87.81a18.468 18.468 0 0 0-17.75-13.37H377.49c-8.23 0-15.48 5.46-17.75 13.37l-89.99 313.72c-2.2 7.69 0.78 15.92 7.42 20.4l219.17 147.63c3.12 2.1 6.72 3.14 10.31 3.14 3.6 0 7.19-1.04 10.31-3.14l219.17-147.63a18.43 18.43 0 0 0 7.44-20.4z" fill="#ED5564" p-id="7452"></path><path d="M524.44 549.27L395.25 87.93a18.454 18.454 0 0 0-17.71-13.49c-8.3-0.01-15.52 5.43-17.8 13.37l-89.99 313.72c-2.2 7.69 0.78 15.92 7.42 20.4l219.17 147.63c3.12 2.1 6.72 3.14 10.31 3.14 3.8 0 7.58-1.16 10.8-3.49a18.45 18.45 0 0 0 6.99-19.94z" fill="#DA4453" p-id="7453"></path><path d="M482.28 74.44l122.89 435.7 32.23-21.7-116.76-414z" fill="#FFCE54" p-id="7454"></path><path d="M376.07 488.53l32.35 21.79 51.52-191.36-19.47-69.59z" fill="#F6BB42" p-id="7455"></path><path d="M506.67 738.78m-166.08 0a166.08 166.08 0 1 0 332.16 0 166.08 166.08 0 1 0-332.16 0Z" fill="#FFCE54" p-id="7456"></path></svg>-->
      <span>作者榜</span>
    </header>
    <main>
      <a
          v-for="author in authors"
          :key="author.userId"
          href="https://www.baidu.com" target="_blank">
        <div class="author-item">
          <avatar :avatar="author.avatar"/>
          <div class="des">
            <p class="name">
              <span class="username">{{ author.username }}</span>
              <level :level="author.level"/>
            </p>
            <p class="introduction">{{ author.introduction }}</p>
          </div>
        </div>
      </a>
    </main>
    <footer>
      <a :href="origin+'/#/author-rank'" target="_blank">
        <span>更多榜单</span>
        <i class="el-icon-arrow-right"></i>
      </a>
    </footer>
  </div>
</template>

<script>
import Level from "@/components/level";
import Avatar from "@/components/avatar";
export default {
  name: "author-rank-side",
  components: {Avatar, Level},
  props: {
    authors: Array
  }
}
</script>

<style lang="less" scoped>

.author-rank-side {
  background-color: #fff;
  margin: 10px;
  width: 260px;


  header {
    .flex-center();
    height: 40px;
    font-size: 14px;
    padding: 0 10px;
    border-bottom: 1px solid #f1f1f1;

    .icon {
      margin-right: 4px;
    }
  }
}

main {
  border-bottom: 1px solid #f1f1f1;

  .author-item {
    .flex-center();
    padding: 10px;

    &:hover {
      background-color: #fbfbfb;
    }

    img {
      .size(50px);
      border-radius: 50%;
      margin-right: 10px;
      flex-shrink: 0;
    }

    .des {
      .name {
        font-size: 16px;
        margin-bottom: 4px;
        .flex-center();
        .username{
          max-width: 140px;
          .text-ellipse();
          margin-right: 10px;
        }
      }

      .introduction {
        width: 180px;
        .text-ellipse();
        font-size: 13px;
        color: #909090;
      }
    }
  }
}

footer {
  text-align: center;
  height: 40px;
  line-height: 40px;

  i, span {
    color: #007fff;
  }

  i {
    font-weight: bold;
  }
}
</style>